// components/reports/sleep/index.ts
import { dateChange, getHour, getStatus, getType, timestampToTime } from "../../../utils/report"
import * as echarts from '../../../components/ec-canvas/echarts'
import request from '../../../utils/request'

var chart: any = null
function initChart(canvas: any, width: any, height: any, dpr: any) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素
    });
    canvas.setChart(chart);
    return chart;
}
Component({

    /**
     * 组件的属性列表
     */
    properties: {
        visitNo: {
			type: String,
            value: "",
            observer(newVal, oldVal) {
                this.getData()
            }
		}
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            onInit: initChart
        },
        sleepData: [], //睡眠数据
        colors: ['#722ED1', '#14C9C9', '#F5319D', '#00A991'], //状态的颜色
        state: ['离床', '清醒', '浅睡', '深睡'],//状态
        mainDateTime: '',
        mainData: [],
        lastStatus: 0,
        dataFmt: {
            reportTime: '',// 报告日期
            sleepDuration: '0',// 睡眠时长
            deepSleepDuration: '0',// 深睡时长
            lightSleepDuration: '0',// 浅睡时长
            sleepWakingDuration: '0',// 清醒时长
            sleepTimeStr: '--',// 上床时间
            wakeUpTimeStr: '--',// 起床时间
            bodymoveStatus: '--',// 体动情况
            getUpCount: '0',// 离床次数
        }
    },

    attached(){
        // 在组件实例进入页面节点树时执行
    },
    ready(){
        // 在组件布局完成后执行
    },
    moved(){
        // 在组件实例被移动到节点树另一个位置时执行
    },
    detached(){
        // 在组件实例被从页面节点树移除时执行
    },
    /**
     * 组件的方法列表
     */
    methods: {

        getData(){
            wx.showLoading({
                title: '加载中…',
            })

            let that = this;
            if(chart) {
                that.sleep();
            } else {
                setTimeout(function(){
                    that.sleep();
                }, 1000);
            }
            
        },

        //睡眠
        sleep() {
            request.get('/applet/mattress/report/sleep', {visitNo: this.data.visitNo}).then((res: any) => {
                wx.hideLoading()
                this.setData({
                    sleepData: res.data.data,
                })

                console.log(this.data.sleepData)

                let { colors, state, mainDateTime, mainData, sleepData, lastStatus } = this.data
                if (! sleepData) return

                this.setData({
                    dataFmt: {
                        reportTime: sleepData.reportTime || '--', // 报告日期
                        sleepDuration: sleepData.sleepDuration ? this.fmt(sleepData.sleepDuration) : '0s', // 睡眠时长
                        deepSleepDuration: sleepData.deepSleepDuration? this.fmt(sleepData.deepSleepDuration) : '0s',// 深睡时长
                        lightSleepDuration: sleepData.lightSleepDuration ? this.fmt(sleepData.lightSleepDuration) : '0s',// 浅睡时长
                        sleepWakingDuration: sleepData.sleepWakingDuration ? this.fmt(sleepData.sleepWakingDuration) : '0s',// 清醒时长
                        sleepTimeStr: sleepData.sleepTimeStr || '--',// 上床时间
                        wakeUpTimeStr: sleepData.wakeUpTimeStr || '--',// 起床时间
                        bodymoveStatus: sleepData.bodymoveStatus || '--',// 体动情况
                        getUpCount: sleepData.getUpCount || 0,// 离床次数
                    }
                })

                let arr = sleepData.stageRecordsList || [];
                arr.forEach((val, i) => {
                    val.sleepStage = Number(val.sleepStage)
                    let acquisitionTime = val.acquisitionTime.replace(/-/g,"/");
                    let createDate: string = timestampToTime(acquisitionTime, false, false)
                    let createTime: string = timestampToTime(acquisitionTime, true, false)
                    if (lastStatus.value == val.sleepStage) {
                        mainData[mainData.length - 1].value[2] = createTime
                    } else {
                        let lastTime: string | number = ''
                        if (i == 0) {
                            let time = createDate + ' 18:00:00'
                            //判断初始时间是否为凌晨
                            if (getHour(time, acquisitionTime)) {
                                createDate = dateChange(-1, createDate)
                            }
                            lastTime = createDate + ' 18:00'
                            mainDateTime = createDate
                        } else {
                            lastTime = mainData[mainData.length - 1].value[2]
                        }

                        let item = {
                            itemStyle: {
                                color: colors[getStatus(val.sleepStage)]
                            },
                            name: getType(val.sleepStage),
                            value: [getStatus(val.sleepStage) + 1, lastTime, createTime]
                        }

                        mainData.push(item)
                    }
                    lastStatus = val.sleepStage
                })
                
                let min = mainDateTime + ' 18:00';
                let max = dateChange(1, mainDateTime) + ' 08:00';
                let option = {
                    color: colors,
                    tooltip: {
                        formatter: function (params: any) {
                            return params.name + ':' + params.value[1] + '~' + params.value[2]
                        } //数据的值
                    },
                    legend: {// 图例
                        data: state,
                        left: 'left',
                        bottom: '-2%',
                        icon: 'rect',
                        itemHeight: 8,
                        itemWidth: 8,
                        selectedMode: true, // 图例设为不可点击
                        textStyle: {
                            color: '#626266'
                        }
                    },
                    grid: {// 绘图网格
                        left: '0%',
                        right: '0%',
                        top: '0%',
                        bottom: '13%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'time',
                        scale: true, // 不会强制包含零刻度。在双数值轴的散点图中比较有用
                        interval: 3600 * 1000, //以一个小时递增
                        min: min, //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
                        max: max,
                    },
                    yAxis: {
                        data: ['离床', '清醒', '浅睡', '深睡'],
                        axisTick: {
                            show: false //y轴刻度消失
                        },
                        axisLine: {
                            show: false //y轴线消失
                        }
                    },

                    series: [// 用空bar来显示三个图例
                        { name: state[0], type: 'bar', data: [] },
                        { name: state[1], type: 'bar', data: [] },
                        { name: state[2], type: 'bar', data: [] },
                        { name: state[3], type: 'bar', data: [] },
                        {
                            type: 'custom',
                            renderItem: function (params: any, api: any) {
                                //开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
                                var categoryIndex = api.value(0) - 1 //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
                                var start = api.coord([api.value(1), categoryIndex]) // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
                                var end = api.coord([api.value(2), categoryIndex])
                                var height = api.size([0, 1])[1]
                                return {
                                    type: 'rect', // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                                    shape: echarts.graphic.clipRectByRect(
                                        {
                                            // 矩形的位置和大小。
                                            x: start[0],
                                            y: start[1] - height / 2,
                                            width: end[0] - start[0],
                                            height: params.coordSys.height
                                        },
                                        {
                                            // 当前坐标系的包围盒。
                                            x: params.coordSys.x,
                                            y: params.coordSys.y,
                                            width: params.coordSys.width,
                                            height: params.coordSys.height
                                        }
                                    ),
                                    style: api.style()
                                }
                            },
                            encode: {
                                x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
                                y: 0 // data 中『维度0』对应到 Y 轴
                            },
                            data: mainData
                        }
                    ]
                }
                chart.setOption(option);
            })
        },

        fmt(timeStr: string){
            if(! timeStr) {
                return "0";
            }
            timeStr = timeStr.replace("小时", "h");
            timeStr = timeStr.replace("分钟", "m");
            timeStr = timeStr.replace("秒", "s");
            timeStr = timeStr.replace(/\s*/g,"");
            return timeStr;
        }
    }
})